<template>
    <n-form class="w-[340px]" ref="formRef" :model="form" :rules="rules" :show-label="false">
        <n-form-item path="phone">
            <n-input v-model:value="form.phone" placeholder="手机号" />
        </n-form-item>

        <n-form-item path="code">
            <n-input-group>
                <n-input v-model:value="form.code" :style="{ width: '75%' }" placeholder="验证码" />
                <client-only>
                    <SendCode :phone="form.phone" />
                </client-only>
            </n-input-group>
        </n-form-item>


        <n-form-item path="password">
            <n-input type="password" show-password-on="mousedown" v-model:value="form.password" placeholder="新密码" />
        </n-form-item>

        <n-form-item path="repassword">
            <n-input type="password" show-password-on="mousedown" :disabled="!form.password"
                v-model:value="form.repassword" placeholder="新确认秘密" />
        </n-form-item>


        <div class="w-full flex justify-between mb-2">
            <n-button @click="$router.go(-1)" type="primary" quaternary size="tiny">登录</n-button>
        </div>


        <div class="">
            <n-button class="w-full" type="primary" @click="onSubmit" :loading="loading">
                重置密码
            </n-button>
        </div>

    </n-form>
</template>

<script setup>
// 引入CompositionAPI
import { ref, reactive, computed } from "vue";

// 引入 naive-ui 组件
import { NButton, NInput, NForm, NFormItem, createDiscreteApi, NInputGroup } from "naive-ui";

// 路由实例
const router = useRouter();

// formRef 实例
const formRef = ref();

// 加载中
const loading = ref(false);

// 响应式数据
const form = reactive({
    phone: "",
    code: "",
    password: "",
    repassword: "",
});

// 规则
const rules = computed(() => {
    return {
        phone: [
            {
                required: true,
                message: "手机号",
                trigger: ['input', 'blur']
            },
        ],
        code: [
            {
                required: true,
                message: '验证码',
                trigger: ['input', 'blur']
            }
        ],
        password: [
            {
                required: true,
                message: '密码',
                trigger: ['input', 'blur']
            }
        ],
        repassword: [
            {
                required: true,
                message: '确认密码'
            },
            {
                validator: (rule, value) => {
                    return value === form.password;
                },
                message: "两次密码不相同",
                trigger: ['input', 'blur']
            }
        ]
    }
})

// 提交表单
const onSubmit = () => {
    formRef.value.validate(async (error) => {
        if (!error) {


            const { error, data } = await useForgetApi(form);

            if (error.value) return;


            const { message } = createDiscreteApi(["message"]);

            message.success("重置密码成功");

            console.log(data);

            router.go(-1)

        };
    })
}

// 回车事件
useEnterEvent(() => onSubmit());

// 导航栏标题
useHead({ title: "忘记密码" })

// 为你的页面组件定义元数据。
definePageMeta({
    title: "忘记密码",
    layout: "login",
    middleware: ["only-visitor"]
});
</script>
